<template>
  <el-dialog v-model="dialogVisible" width="60%" :title="`检查项${title}`" @close="cancel">
    <el-form
      ref="ruleFormRef"
      :rules="rules"
      :model="formData"
      label-width="auto"
      style="overflow-x: hidden; padding: 0px 20px; box-sizing: border-box"
    >
      <div class="form-group-title">基础信息</div>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item class="form-itme-width" label="检验类别" prop="checkCategoryDict">
            <el-select v-model="formData.checkCategoryDict" placeholder="请选择检验类别" clearable>
              <el-option
                v-for="(item, index) in DC_CHECKCATEGORY_DICT"
                :key="index"
                :value="item.label"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="form-itme-width" label="检查项名称：" prop="inspectionItemName">
            <el-select
              v-model="formData.inspectionItemName"
              placeholder="请选择检查项名称："
              clearable
            >
              <el-option
                v-for="(item, index) in DC_INAPECTIONITEM_NAME"
                :key="index"
                :value="item.label"
                :label="item.label"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item class="form-itme-width" label="参考版本：" prop="referVersion">
            <el-input v-model="formData.referVersion" placeholder="" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <div class="form-group-title">图片实例</div>
      <el-row :gutter="24">
        <el-col :span="24">
          <el-form-item prop="pictureId" class="uppicture">
            <dc-upload-img v-model="formData.pictureId" />
          </el-form-item>
        </el-col>
      </el-row>

      <div class="form-group-title">检查项列表</div>
      <el-button type="text" style="margin: -10px 0px 10px" @click="addRow" icon="el-icon-plus"
        >添加检查项</el-button
      >
      <el-table :data="sipEntryItems" style="width: 100%">
        <el-table-column label="" width="60">
          <template #default="scope">
            <el-button
              type="text"
              icon="el-icon-minus"
              circle
              @click="deleteRow(scope.$index, sipEntryItems)"
            ></el-button>
          </template>
        </el-table-column>
        <el-table-column label="序号" type="index" width="60px" align="center">
          <template #default="scoped">
            <span>{{ scoped.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="inspectionItem" label="检查项名称" align="center">
          <template #default="scope">
            <el-input v-model="scope.row.inspectionItem" size="medium" />
          </template>
        </el-table-column>
        <el-table-column prop="method" label="检测方法&标准" width="280" align="center">
          <template #default="scope">
            <el-input v-model="scope.row.method" size="medium" />
          </template>
        </el-table-column>
      </el-table>
      <div class="form-group-title">备注信息</div>

      <el-col :span="24">
        <el-form-item prop="process">
          <el-input
            type="textarea"
            :row="6"
            v-model="formData.remark"
            placeholder="请输入备注信息"
            :clearable="true"
          ></el-input>
        </el-form-item>
      </el-col>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
        <el-button @click="cancel(ruleFormRef)">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, toRefs, getCurrentInstance } from 'vue';
import Api from '@/api/index';
import dayjs from 'dayjs';

const { proxy } = getCurrentInstance();
// 数据字典
const { DC_CHECKCATEGORY_DICT, DC_INAPECTIONITEM_NAME } = proxy.useCache([
  { key: 'DC_CHECKCATEGORY_DICT' },
  { key: 'DC_INAPECTIONITEM_NAME' },
]);

const data = reactive({
  loading: true,
  rules: {
    checkCategoryDict: [{ required: true, message: '检验类别为必选项', trigger: 'change' }],
    inspectionItemName: [{ required: true, message: '检查项名称为必选项', trigger: 'change' }],
  },
  dialogVisible: false,
  formData: {},
  ids: [],
  title: '新增',
  sipEntryItems: [],
});

const { rules, dialogVisible, formData, title, sipEntryItems } = toRefs(data);
const ruleFormRef = ref(null);
const emit = defineEmits(['success']);

// 打开添加弹窗
const openDialog = row => {
  proxy.resetForm('ruleFormRef');
  data.formData = row;
  if (row.type == '新增') {
    data.formData.version = 'V1.1';
  }

  data.sipEntryItems = row.sipEntryItems || [];
  title.value = row.type;
  dialogVisible.value = true;
};

// 弹出框提交表单
const submitForm = async formEl => {
  formEl.validate(async valid => {
    if (valid) {
      let data = {
        ...formData.value,
        sipEntryItems: sipEntryItems.value,
        uniqueCode: title.value == '新增' ? dayjs().valueOf() : formData.value.uniqueCode,
      };
      const res = await Api.qms.sn.entrySubmit(data);
      const { code, msg } = res.data;
      if (code === 200) {
        cancel();
        emit('success');
        proxy.$message.success(msg);
      }
    }
  });
};

// 取消
const cancel = () => {
  dialogVisible.value = false;
  formData.value = {};
  sipEntryItems.value = [];
};

// 添加行
const addRow = () => {
  sipEntryItems.value.push({ inspectionItem: '', method: '' });
};

// 删除行
const deleteRow = (index, rows) => {
  rows.splice(index, 1);
};

defineExpose({
  openDialog,
});
</script>

<style scoped lang="scss">
.uppicture :deep(.component-upload-image) {
  .el-upload--picture-card {
    width: 160px; /* 设置上传按钮的宽度 */
    height: 120px; /* 设置上传按钮的高度 */
    line-height: 120px; /* 设置上传按钮的行高 */
  }

  .el-upload-list--picture-card .el-upload-list__item {
    width: 160px; /* 设置图片项的宽度 */
    height: 120px; /* 设置图片项的高度 */
  }

  .hide .el-upload--picture-card {
    display: none;
  }
}
.form-group-title {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 10px 0px 20px;
  font-weight: 600;
  font-size: 16px;
  color: #333;

  &::before {
    margin-right: 4px;
    display: block;
    content: '';
    width: 4px;
    height: 13px;
    background-color: #f78431;
  }
}

.report-info {
  width: 100%;
  border-radius: 4px 4px 4px 4px;
  border: 1px solid #dadbe0;
  padding: 8px 16px;
  box-sizing: border-box;
  margin: 16px 0px 20px;
  background-color: #f6f8fa;
  color: #848488;
  font-size: 14px;
  .report-info-item {
    display: flex;
    align-items: center;
    line-height: 24px;
  }
}
</style>
